import React,{memo,useState} from 'react'
import { Button,Popover } from 'antd';
import EmojiItem from './emoji'
import UserListBox from './userList'
import UpdataItem from './updataItem'
import UrlItem from './urItem'
function FromBox (props, ref){
    const  [text, setText] = useState('')
    const [open, setOpen] = useState(false)
  const [open2, setOpen2] = useState(false)
  const [open3, setOpen3] = useState(false)
  const [typeText,setTypeText] = useState({
    name:"所以人可见",
    type:0,
    icon:'iconfont  mt-round_favor_fill'
  })


   const  onEmojiSelect = (e)=>{
      let name = text + e.native
     setText(name);
     console.log(e)
   }
  /***
   * 显示表情栏选择器
   */
  const content = (
    <div className="emoji-item">
      <EmojiItem onEmojiSelect={(e)=>onEmojiSelect(e)}></EmojiItem>
    </div>
  );
  /***
   * @好友选择器
   */
    const  aiteUser = (<UserListBox onUserObj={(e)=>userObj(e)}></UserListBox>)
    const onText = (e)=>{
      console.log(e)
      setText(e.target.value)
    }
    const handleOpenChange = (newOpen: boolean,type) => {
      if(type === 'open3'){
        setOpen3(newOpen)
      }else{
        setOpen(newOpen);
      }

  };
  const handleOpenChange2 = (newOpen: boolean) => {
    setOpen2(newOpen);
  };
    const userObj = (e)=>{
      setOpen(false);
    }
    const huati = ()=>{
      let name = "#输入话题标题#"
      setText(name);
    }
  let typeList = [
    {
      name:"所以人可见",
      type:0,
      icon:'iconfont  mt-round_favor_fill'
    },
    {
      name:"特别关心可见",
      type:1,
      icon:' iconfont  mt-round_like_fill'
    },
    {
      name:"自己可见",
      type:2,
      icon:'iconfont  mt-round_people_fill'
    }
  ]
  const listShow = (typeList.map(e=><div className="typeItem" onClick={()=>ontext(e)}
  ><i className={e.icon}></i>{e.name}</div>))
   const ontext = (e)=>{
     setTypeText(e);
     setOpen2(false);
   }
   const onUpdate = (<div className="from-updata-box">
     <UpdataItem></UpdataItem>
   </div>)

  const onUrl = (<div className="from-url-box">
        <UrlItem></UrlItem>
  </div>)




  return <>
    <div className="fromBox-main">
        <div className="fromBox-list">
          <div className="frombox-l">
            <textarea className="from-textarea"
                      onInput={(e)=>onText(e)}
                      value={text}
            placeholder="想说点什么呢"
            ></textarea>
          </div>
          <div className="frombox-c">
            <Popover placement="bottom"
                     open={open3}
                     onOpenChange={(e)=>handleOpenChange(e,'open3')}
                     content={onUpdate}
                     trigger="click">
            <i onClick={()=>setOpen3(true)} className="iconfont mt-xiangji icon"></i>
            </Popover>
          </div>
          <div className="frombox-r">
            <Popover placement="bottom" content={onUrl} trigger="click">
            <i className="iconfont mt-charulianjie icon"></i>
            </Popover>
          </div>
        </div>
        <div className="fromBox-bottom">
          <div className="fb-l">
            <Popover placement="bottom" content={content} trigger="click">
            <i className="iconfont mt-xiaolian icon"></i>
            </Popover>
            <Popover placement="bottomLeft"
                     open={open}
                     onOpenChange={handleOpenChange}
                     content={aiteUser}
                     trigger="click">
            <i className="iconfont mt-aite icon" onClick={()=>setOpen(true)}></i>
            </Popover>
            <i onClick={()=>huati()}  className="iconfont mt-jinghao icon"></i>
          </div>
          <div className="fb-r">
             <div>可见范围：
               <Popover placement="bottom"
                        open={open2}
                        onOpenChange={handleOpenChange2}
                        content={listShow} trigger="click">
               <span onClick={()=>setOpen2(true)}>{typeText.name}</span>
               </Popover>
               <i className="iconfont mt-jiantou_xia icon"></i>
             </div>
            <Button type="primary" className="from-but" size="small" >发布</Button>
          </div>
        </div>
    </div>
  </>
}

export default  memo(FromBox);
